<template>
  <div>
    <!-- 把顶部看不见的地方占住 -->
    <div style="height: 50px" />
    <van-nav-bar
      :title="ddata.friendName"
      left-text="返回"
      right-text="按钮"
      left-arrow
      fixed
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div
      v-for="(item, index) in liangrnegxoapxo"
      :key="index"
      class="liaotian"
      :style="
        ddata.woUid == item.shuiUid
          ? 'flex-direction: row-reverse'
          : 'flex-direction: row'
      "
    >
      <!-- 头像 -->
      <div class="touxiang">
        <van-image
          class="imgggg"
          round
          :src="
            ddata.woUid == item.shuiUid
              ? $store.state.userData.img ||
                'https://img01.yzcdn.cn/vant/cat.jpeg'
              : ddata.titleImg
          "
        />
      </div>
      <!-- 消息 -->
      <div class="xiaoxi">
        <span>
          {{ item.xiaoxineirong }}
        </span>
      </div>
    </div>
    <!-- 把底部看不见的地方占住 -->
    <div style="height: 60px" />

    <van-field
      v-model="sms"
      center
      clearable
      placeholder="发送消息"
      class="asdadas"
    >
      <template #button>
        <van-button size="small" type="primary" @click="fasong"
          >发送</van-button
        >
      </template>
    </van-field>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Chat",
  props: ["ddata"],
  data() {
    return {
      // 两人聊天消息
      liangrnegxoapxo: [],
      sms: "",
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      alert("按钮");
    },
    async fasong() {
      // console.log(document.documentElement.scrollTop);
      // console.log("ddata：",this.ddata);
      await axios
        .post(
          "http://localhost:8080/friend/addliaotian",
          {
            woUid: this.ddata.woUid,
            tauid: this.ddata.uid,
            ltnr: this.sms,
          },
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded", // 或者 'multipart/form-data'
            },
          }
        )
        .then((res) => {
          console.log(this.liangrnegxoapxo);
          this.liangrnegxoapxo.push({
            shuiUid: this.ddata.woUid,
            xiaoxineirong: this.sms,
          });
          // 让消息在最底部
          this.$nextTick(() => {
            document.documentElement.scrollTop =
              document.documentElement.scrollHeight;
          });
          this.sms = "";
        });

      await axios
        .post(
          "http://localhost:8080/friend/user",
          { woUid: localStorage.getItem("userxx") },
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded", // 或者 'multipart/form-data'
            },
          }
        )
        .then((res) => {
          this.$store.state.ltjl = res.data.data;
          console.log("this.$store.state.ltjl:", this.$store.state.ltjl);
        });
    },
  },
  mounted() {
    if (!this.ddata) {
      this.$router.push("/qiangguotong").catch((r) => {});
    }
    // console.log(this.ddata);
    this.liangrnegxoapxo = this.ddata.chattingRecords[0].allMessage;

    // 让消息在最底部
    this.$nextTick(() => {
      document.documentElement.scrollTop =
        document.documentElement.scrollHeight;
    });
  },
};
</script>

<style scoped>
.liaotian {
  width: calc(100% - 20px);
  /* height: 70px; */
  /* background-color: aqua; */
  display: flex;
  align-items: flex-start;
  margin: 15px 10px;
}
.touxiang {
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
}
.touxiang > img {
  height: 100%;
}
.imgggg {
  width: 55px;
}
.xiaoxi {
  max-width: 75%;
  min-height: 40px;
  background-color: rgb(65, 247, 74);
  display: flex;
  align-items: center;
  flex-direction: row;
  border-radius: 10px;
  margin-left: 10px;
  padding: 5px 8px;
}
.asdadas {
  position: fixed; /* 吸底定位 */
  bottom: 0; /* 距离底部为 0 */
}
</style>